<!DOCTYPE html>
<html lang="en"><head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.5.0 -->
<title>Announcing the js-sys crate! | Rust and WebAssembly</title>
<meta name="generator" content="Jekyll v3.7.4" />
<meta property="og:title" content="Announcing the js-sys crate!" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="We’ve just published the js-sys crate on crates.io!" />
<meta property="og:description" content="We’ve just published the js-sys crate on crates.io!" />
<link rel="canonical" href="https://rustwasm.github.io/2018/07/26/announcing-the-js-sys-crate.html" />
<meta property="og:url" content="https://rustwasm.github.io/2018/07/26/announcing-the-js-sys-crate.html" />
<meta property="og:site_name" content="Rust and WebAssembly" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2018-07-26T00:00:00+00:00" />
<script type="application/ld+json">
{"headline":"Announcing the js-sys crate!","dateModified":"2018-07-26T00:00:00+00:00","datePublished":"2018-07-26T00:00:00+00:00","description":"We’ve just published the js-sys crate on crates.io!","mainEntityOfPage":{"@type":"WebPage","@id":"https://rustwasm.github.io/2018/07/26/announcing-the-js-sys-crate.html"},"url":"https://rustwasm.github.io/2018/07/26/announcing-the-js-sys-crate.html","@type":"BlogPosting","@context":"http://schema.org"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="/assets/main.css">
        <link rel="stylesheet" href="/assets/extra.css"><link type="application/atom+xml" rel="alternate" href="https://rustwasm.github.io/feed.xml" title="Rust and WebAssembly" /></head>
<body><header class="site-header" role="banner">

        <div class="wrapper"><a class="site-title" rel="author" href="/">
            <img src="/assets/rustwasm.png" style="max-height: 2em"/>
            Rust and WebAssembly
          </a><nav class="site-nav">
              <input type="checkbox" id="nav-trigger" class="nav-trigger" />
              <label for="nav-trigger">
                <span class="menu-icon">
                  <svg viewBox="0 0 18 15" width="18px" height="15px">
                    <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
                    <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
                    <path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
                  </svg>
                </span>
              </label>

              <div class="trigger">
                  <a class="page-link" href="/docs.html">📚 Learn</a>
                  <a class="page-link" href="/">📖 Blog</a>
                  <a class="page-link" href="https://github.com/rustwasm/team/blob/master/README.md#get-involved">👯 Get Involved</a>
              </div>
            </nav></div>
      </header>
<div class="wrapper" style="background:rgb(245, 170, 170);border: 5px solid red;">
  This project and website is <a href="https://blog.rust-lang.org/inside-rust/2025/07/21/sunsetting-the-rustwasm-github-org/">no longer maintained</a>
</div>
<main class="page-content" aria-label="Content"><div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">

  <header class="post-header">
    <h1 class="post-title p-name" itemprop="name headline">Announcing the js-sys crate!</h1>
    <p class="post-meta">
      <time class="dt-published" datetime="2018-07-26T00:00:00+00:00" itemprop="datePublished">Jul 26, 2018
      </time></p>
  </header>

  <div class="post-content e-content" itemprop="articleBody">
    <p>We’ve just published the <a href="https://crates.io/crates/js-sys"><code class="highlighter-rouge">js-sys</code> crate on crates.io</a>!</p>

<p>The <code class="highlighter-rouge">js-sys</code> crate contains raw <code class="highlighter-rouge">#[wasm_bindgen]</code> bindings to all the global
APIs guaranteed to exist in every JavaScript environment by the ECMAScript
standard. It does <em>not</em> contain bindings to any Web- or Node-specific APIs. With
the <code class="highlighter-rouge">js-sys</code> crate, we can work with <code class="highlighter-rouge">Object</code>s, <code class="highlighter-rouge">Array</code>s, <code class="highlighter-rouge">Function</code>s, <code class="highlighter-rouge">Map</code>s,
<code class="highlighter-rouge">Set</code>s, etc… without writing the <code class="highlighter-rouge">#[wasm_bindgen]</code> imports by hand.</p>

<p>For example, we can invoke JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function"><code class="highlighter-rouge">Function</code></a> callbacks and
time how long they take to execute with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now"><code class="highlighter-rouge">Date.now()</code></a>, and we
don’t need to write any JS imports ourselves:</p>

<figure class="highlight"><pre><code class="language-rust" data-lang="rust"><span class="k">extern</span> <span class="n">crate</span> <span class="n">js_sys</span><span class="p">;</span>
<span class="k">extern</span> <span class="n">crate</span> <span class="n">wasm_bindgen</span><span class="p">;</span>
<span class="k">use</span> <span class="nn">wasm_bindgen</span><span class="p">::</span><span class="nn">prelude</span><span class="p">::</span><span class="o">*</span><span class="p">;</span>

<span class="nd">#[wasm_bindgen]</span>
<span class="k">pub</span> <span class="k">fn</span> <span class="nf">timed</span><span class="p">(</span><span class="n">callback</span><span class="p">:</span> <span class="o">&amp;</span><span class="nn">js_sys</span><span class="p">::</span><span class="n">Function</span><span class="p">)</span> <span class="k">-&gt;</span> <span class="nb">f64</span> <span class="p">{</span>
    <span class="k">let</span> <span class="n">then</span> <span class="o">=</span> <span class="nn">js_sys</span><span class="p">::</span><span class="nn">Date</span><span class="p">::</span><span class="nf">now</span><span class="p">();</span>
    <span class="n">callback</span><span class="nf">.apply</span><span class="p">(</span><span class="nn">JsValue</span><span class="p">::</span><span class="nf">null</span><span class="p">(),</span> <span class="o">&amp;</span><span class="nn">js_sys</span><span class="p">::</span><span class="nn">Array</span><span class="p">::</span><span class="nf">new</span><span class="p">())</span><span class="nf">.unwrap</span><span class="p">();</span>
    <span class="k">let</span> <span class="n">now</span> <span class="o">=</span> <span class="nn">js_sys</span><span class="p">::</span><span class="nn">Date</span><span class="p">::</span><span class="nf">now</span><span class="p">();</span>
    <span class="n">now</span> <span class="err">-</span> <span class="n">then</span>
<span class="p">}</span></code></pre></figure>

<p>The <code class="highlighter-rouge">js-sys</code> crate isn’t quite 100% feature complete yet. There are still some
JavaScript types and methods that we don’t have bindings for. <strong>If you want to
help <code class="highlighter-rouge">js-sys</code> cross the finish line, <a href="https://github.com/rustwasm/wasm-bindgen/issues/275">check out this issue!</a></strong></p>

<p>Also, as mentioned above, the <code class="highlighter-rouge">js-sys</code> crate doesn’t contain bindings to any Web
APIs like <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll"><code class="highlighter-rouge">document.querySelectorAll</code></a>. These will be part of the
<code class="highlighter-rouge">web-sys</code> crate, which is mechanically generated from WebIDL interface
definitions. We need help with <code class="highlighter-rouge">web-sys</code> too! <strong>If you want to help with
<code class="highlighter-rouge">web-sys</code>, check out <a href="https://rustwasm.github.io/wasm-bindgen/web-sys.html">its contributing documentation</a> and
<a href="https://github.com/rustwasm/wasm-bindgen/issues?q=is%3Aissue+is%3Aopen+label%3Aweb-sys">issues labeled “web-sys”</a>.</strong></p>

<p>Finally, a <strong><em>SUPER HUGE</em></strong> thank you to the 34 people who have contributed to
the <code class="highlighter-rouge">js-sys</code> crate thus far! 💖</p>

<ul>
  <li>Alexander Kryvomaz</li>
  <li>Alex Crichton</li>
  <li>belfz</li>
  <li>Chris Kolodin</li>
  <li>Craig Disselkoen</li>
  <li>data-pup</li>
  <li>Dimitrii Nemkov</li>
  <li>gaurikholkar</li>
  <li>Herman J. Radtke III</li>
  <li>Ivan Enderlin</li>
  <li>Jannik Keye</li>
  <li>Johannes Henninger</li>
  <li>Jonathan Sundqvist</li>
  <li>Kevin Hoffman</li>
  <li>kzvi</li>
  <li>Lachezar Lechev</li>
  <li>Liigo Zhuang</li>
  <li>Marcin Baraniecki</li>
  <li>Matias Insaurralde</li>
  <li>Matt Long</li>
  <li>Michael Hoffmann</li>
  <li>Nick Fitzgerald</li>
  <li>R. Andrew Ohana</li>
  <li>robertdurst</li>
  <li>Satoshi Amemiya</li>
  <li>Sendil Kumar</li>
  <li>Stephan Renatus</li>
  <li>Tim Ryan</li>
  <li>T. Nagasawa</li>
  <li>Tomohide Takao</li>
  <li>toversus</li>
  <li>Tyler Laing</li>
  <li>Tyler Wilcock</li>
  <li>xeqlol</li>
</ul>


  </div><a class="u-url" href="/2018/07/26/announcing-the-js-sys-crate.html" hidden></a>
</article>

      </div></main><footer class="site-footer h-card">
    <data class="u-url" href="/"></data>
  
    <div class="wrapper">
  
      <h2 class="footer-heading">Rust and WebAssembly</h2>
  
      <div class="footer-col-wrapper">
        <div class="footer-col footer-col-1">
          <ul class="contact-list">
            <li class="p-name">Rust and WebAssembly</li></ul>
        </div>
  
        <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rustwasm"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#github"></use></svg> <span class="username">rustwasm</span></a></li><li><a href="https://www.twitter.com/rustwasm"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">rustwasm</span></a></li></ul>
</div>
  
        <div class="footer-col footer-col-3">
          <p>Stay up to date with events, learning resources, and recent developments in Rust and WebAssembly community.</p>
        </div>
      </div>
  
    </div>
  
  </footer><!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-85933208-2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-85933208-2');
</script>
</body>

</html>
